<template>
<div class="swipper-box">
  <swiper :options="swiperOption" ref="mySwiper" >

        <swiper-slide v-for="item in SwiperList" :key="item.id">
          <img class="swipper-img" :src="item.imgUrl" alt="">
        </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>

  </swiper>
</div>
</template>

<script>
    import HomeFooter from "./HomeFooter";
    import HomeHeader from "./HomeHeader";

    export default {
      props:{
        SwiperList:Array
      },
        name: "HomeSwippar",
      components: {HomeHeader, HomeFooter},
      data() {
        return {

          swiperOption: {
            loop:true,
            pagination:{
              el:'.swiper-pagination'
            }

          }
        }
      },
    }
</script>

<style scoped lang="stylus">
  .swipper-box{
    height: 0;
    padding-bottom: 40%;
    overflow: hidden;
    margin-top: 10%;
    position :relative
  }
  .swipper-img{
    width: 100%;

  }
  .swiper-pagination{
    text-align: right;
    position :absolute;
    top :20%
  }
  .swipper-box >>> .swiper-pagination-bullet
    background-color blue
    opacity 1
  .swipper-box >>> .swiper-pagination-bullet-active
    background-color red


</style>
